<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="cr-user-autocomplete.html">

<polymer-element name="cr-issue-editor" attributes="issue errors disabled fields">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <link rel="stylesheet" href="../common/forms.css">

        <fieldset class="form-fields" disabled?="{{ disabled }}">
            <template if="{{ fields | contains('subject') }}">
                <div class="form-row">
                    <label class="form-label" for="subject">Title</label>
                    <div class="form-field">
                        <input type="text" id="subject" value="{{ subject }}" autocomplete="off" class="{{ {invalid: errors.subject} | tokenList }}">
                        <div class="form-error">{{ errors.subject }}</div>
                    </div>
                </div>
            </template>

            <template if="{{ fields | contains('reviewers') }}">
                <div class="form-row">
                    <label class="form-label" for="reviewers">Reviewers</label>
                    <div class="form-field">
                        <cr-user-autocomplete id="reviewerAutocomplete" value="{{ reviewers }}">
                            <input type="text" id="reviewers" value="{{ reviewers }}" autocomplete="off" class="{{ {invalid: errors.reviewers} | tokenList }}">
                        </cr-user-autocomplete>
                        Use asterisks to specify required reviewers. Eg: *xyz, abc
                        <div class="form-error">{{ errors.reviewers }}</div>
                    </div>
                </div>
            </template>

            <template if="{{ fields | contains('cc') }}">
                <div class="form-row">
                    <label class="form-label" for="cc">CC</label>
                    <div class="form-field">
                        <cr-user-autocomplete id="ccAutocomplete" value="{{ cc }}">
                            <input type="text" id="cc" value="{{ cc }}" autocomplete="off" class="{{ {invalid: errors.cc} | tokenList }}">
                        </cr-user-autocomplete>
                        <div class="form-error">{{ errors.cc }}</div>
                    </div>
                </div>
            </template>

            <template if="{{ fields | contains('description') }}">
                <div class="form-row">
                    <label class="form-label form-label-textarea" for="description">Description</label>
                    <div class="form-field">
                        <textarea id="description" value="{{ description }}" rows="15" class="{{ {invalid: errors.description} | tokenList }}"></textarea>
                        <div class="form-error">{{ errors.description }}</div>
                    </div>
                </div>
            </template>

            <template if="{{ fields | contains('private') }}">
                <div class="form-row">
                    <label class="form-label form-label-textarea" for="private">Protected</label>
                    <div class="form-field">
                        <input id="private" type="checkbox" checked="{{ private }}">
                        <template if="{{ private }}">
                            <!-- TODO(ojan):
                                1) @webrtc.org addresses are also privileged and can view Private/Protected issues.
                                2) This text will need to differ for internal codereview, as only @google.com and gservice account are allowed there.
                            -->
                            <p class="form-warning">
                                This issue will only be viewable by @chromium.org
                                and @google.com accounts. Avoid adding
                                mailing lists in the Reviewers and CC fields.
                            </p>
                        </template>
                        <div class="form-error">{{ errors.private }}</div>
                    </div>
                </div>
            </template>
        </fieldset>
    </template>
    <script>
        Polymer({
            created: function() {
                this.issue = null;
                this.subject = "";
                this.reviewers = "";
                this.cc = "";
                this.description = "";
                this.errors = null;
                this.disabled = false;
                this.private = false;
                this.fields = "subject description reviewers cc private";
            },
            reset: function() {
                this.disabled = false;
                if (!this.issue)
                    return;
                this.subject = this.issue.subject;
                this.description = this.issue.description;
                this.cc = this.issue.ccEmails();
                this.private = this.issue.private;
                this.reviewers = this.issue.reviewerEmails();
            },
            dismissAutocomplete: function() {
                if (this.$.reviewerAutocomplete.active || this.$.ccAutocomplete.active) {
                    this.$.reviewerAutocomplete.resetAutocomplete();
                    this.$.ccAutocomplete.resetAutocomplete();
                    return true;
                }
                return false;
            },
            createEditData: function() {
                var data = {
                    subject: this.subject,
                    reviewers: this.reviewers,
                    cc: this.cc,
                    description: this.description,
                    closed: this.issue.closed,
                    private: this.private,
                };
                return data;
            },
            contains: function(list, value) {
                return list && list.indexOf(value) != -1;
            },
        });
    </script>
</polymer-element>
